<template>
  <div class="container_main">
    <div class="firstBox"></div>
    <div class="secondBox">
      <div class="hollCard">
        <div style="height: 100%" v-for="(items, index) in secondTwoBoxTable" :key="index">
          <div class="titleStove">
            <div class="divGroup">
              <i class="iconfont_class" :class="items.icons"></i>
              <div class="typeface">{{items.titleName}}</div>
            </div>
            <!-- <div class="tabPage">{{items.nums}}号炉窑&nbsp;&nbsp;环保在线监测</div> -->
          </div>
          <tables :redColor="true" :tableTypes="items" :tableData="items.tableCheckData" />
        </div>
      </div>
    </div>
    <div class="thirdBox">
      <processImg :svgData="svgDatas"/>
      <div class="smallCard">
        <div class="cardTitle">
          <i class="iconfont icon-shishijiance"></i>
          <div class="cardSvg">预热炉温度</div>
        </div>
        <div class="tableThird">
          <preHotTemper :chartsData="thirdBoxTable" />
        </div>
      </div>
    </div>
    <div class="fourthBox">
      <div class="smallCard upCard">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="cardSvg">其他非温度数据</div>
        </div>
        <div style="width: 100%;height: 92%; display: flex; flex-direction: column">
          <div style="height: 33%">
            <pressureChart :chartData="chartDataPressure"></pressureChart>
            <potLiquidChart :chartData="LiquidData.source1 || []"></potLiquidChart>
            <potLiquidChart :chartData="LiquidData.source2 || []"></potLiquidChart>
          </div>
        </div>
      </div>
      <div class="smallCard downCard">
        <div class="cardTitle">
          <div class="inside">
            <i class="iconfont icon-qushi"></i>
            <div class="cardS">导热油与浸渍管</div>
          </div>
        </div>
        <div style="height: calc(97% - 50px);">
          <pressureChart :chartData="chartDataOil"></pressureChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import processImg from './steepComponents/processImg.vue'
import preHotTemper from './steepComponents/preHotTemper.vue'
import pressureChart from './steepComponents/pressureChart.vue'
import potLiquidChart from './steepComponents/potLiquidChart.vue'
// import ployChart from './steepComponents/ployChart.vue'
// import dialBroad from '../components/dialBroad/index.vue' // 仪表盘
// import capsuleDiagram from '../components/capsuleDiagram/index.vue' // 仪表盘
import tables from '../components/tables/index.vue'

export default {
  name: 'steep',
  components: {
    processImg,
    // dialBroad,
    pressureChart,
    potLiquidChart,
    tables,
    preHotTemper
    // ployChart
  },
  data () {
    return {
      thirdBoxTable: [],
      chartDataPressure: [],
      chartDataOil: [],
      svgDatas: {},
      LiquidData: {},
      Status: '',
      typesfourthBoxTable: {
        stripe: false,
        formHead: [],
        tableAllData: []
      },
      secondTwoBoxTable: [
        {
          icons: 'iconfont icon-shujuyuan',
          titleName: '监测数据',
          stripe: false,
          formHead: [],
          tableCheckData: []
        }
      ],
      websock: null,
      timer: null
    }
  },
  created () {
    // this.$socket.createWebSocket('ws://106.52.170.16:8090/getDippingWSData')
    // // this.$socket.createWebSocket('ws://192.168.117.216:8090/getDippingWSData')
    // this.$socket.registerCallBack('chartAllData', this.getAllData)
    this.initWebSocket()
  },
  mounted () {
  },
  destroyed () {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  // beforeRouteLeave (to, from, next) {
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  //   next()
  // },
  // destroyed () {
  //   console.log('+++++离开隧道窑')
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  // },
  methods: {
    initWebSocket () {
      // 初始化weosocket
      //  const token = Cookies.get('token')
      // this.websock = new WebSocket('ws://101.42.233.226:8060/getDippingWSData')
      this.websock = new WebSocket('ws://192.168.95.252:8070/dipReportWSData')
      // console.log(this.websock);
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
    },
    websocketonerror () {
      console.log('建立失败');
      // 连接建立失败重连
      this.reconnect()
    },
    websocketonmessage (e) {
      // 数据接收
      console.log('接收到的浸渍数据', JSON.parse(e.data))
      const redata = JSON.parse(e.data)
      this.getAllData(redata)
    },
    reconnect () {
      // 重连
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.initWebSocket()
      }, 5000)
    },
    getAllData (ret) {
      if (ret !== undefined) {
        console.log('ret接收的浸渍', ret)
        this.getTemperTableData(ret.dipTemperTable)
        this.getSvgDatas(ret.dipConfiguration, ret.dipDeviceStatus)
        this.getMachineDatas(ret.stoveTemper.source)
        this.getFanFrequency(ret.pressure.source)
        this.gethotOilAndDipPot(ret.hotOilAndDipPot.source1)
        this.getPotLiquidData(ret.potLiquid)
        // potLiquid
      }
    },
    // 第yi栏的table数据
    getTemperTableData (data) {
      console.log(data,'看看data');
      const formHead = [
        { '名称(单位)': 'key' },
        { 实时: 'now' },
        // { '10分钟': 'ten' },
        // { '30分钟': 'thirty' },
        { '12小时': 'twelve' }
      ]
      if (data.length > 0) {
        this.secondTwoBoxTable[0].formHead = formHead
        this.secondTwoBoxTable[0].tableCheckData = data
      }
    },
    // getDialBroadData () {
    //   this.chartData = [
    //     {
    //       id: 0,
    //       real: 300,
    //       maxNum: 900, // 表盘最大值
    //       upperVoltage: 671,
    //       lowerVoltage: 219,
    //       region: '一区表'
    //     },
    //     {
    //       id: 1,
    //       real: 389,
    //       maxNum: 900, // 表盘最大值
    //       upperVoltage: 500,
    //       lowerVoltage: 120,
    //       region: '二区表'
    //     },
    //     {
    //       id: 2,
    //       real: 602,
    //       maxNum: 900, // 表盘最大值
    //       upperVoltage: 800,
    //       lowerVoltage: 100,
    //       region: '三区表'
    //     }
    //   ]
    // },
    // 中间下面的
    getMachineDatas (data) {
      this.thirdBoxTable = data || []
    },
    getSvgDatas (data, deviceStatus) {
      this.svgDatas = {
        svgData: data,
        Status: deviceStatus
      }
    },
    // 真空机组
    getFanFrequency (data) {
      this.chartDataPressure = data
    },
    // 浸渍管
    gethotOilAndDipPot (data) {
      this.chartDataOil = data
    },
    getPotLiquidData (data) {
      this.LiquidData.source1 = data.source1
      this.LiquidData.source2 = data.source2
    }
  }
}
</script>
<style scoped>
.secondBox {
  width: 29.5%;
    height: 100%;
    border-top: 3px solid #1091ed;
}
.thirdBox {
  width: 45%;
    height: 100%;
    border-top: 3px solid #4ec8a2;
}
.fourthBox {
  width: 24.1%;
  height: 90vh;
    border-top: 3px solid #f97577;
    display: flex;
    flex-direction: column;
    
}
.smallCard {
  height: calc(100% - 618px);
    margin-top: 8px;
    background-color: #141e28;
    padding: 0 6px 4px 6px;
    box-sizing: border-box;
    width: 100%;
}
.cardTitle {
  display: flex;
    align-items: center;
    height: 50px;
    justify-content: first baseline;
}
.Iconfont {
  margin-left: 5px;
    color: hsla(0, 0%, 100%, .87);
    font-size: 1.3rem;
}
.cardSvg {
  padding-top: 1px;
    margin-left: 7px;
    color: hsla(0, 0%, 100%, .87);
    font-size: 1rem;
    font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans Unicode, Geneva, Verdana, sans-serif;
}
.tableThird {
  width: 100%;
  height: 150px;
}
.upCard {
flex: 1;
}
.downCard {
flex: 0.3;
}
</style>
